<meta charset="UTF-8">
<title>滑动下拉菜单</title>
<script type='text/javascript' src='../../vendor/jquery-1.11.0.min.js'></script>
<style type="text/css">
ul{
	margin:0;padding:0;}
ul li{
	list-style:none;}
#div{
	width:960px;
	height:36px;
	background:#999;}
#div ul li{
	float:left;
	position:relative;
	padding:0px 28px;
	border-left:1px solid #fff;
	height:36px;
	line-height:36px;
	font-weight:bold;}
#div ul li ul{
	position:absolute;
	z-index:99;
	top:36px;
	left:0px;
	display:none;
	width:154px;}
#div ul li ul li{
	display:block;
	width:154px;
	height:26px;
	line-height:26px;
	background-color:#dddddd;
	padding:0px 12px;
	border-bottom:1px #ffffff solid;
	font-weight:normal;}
#div ul li a{
	color:#000000;
	text-decoration:none;
	font-size:12px;}
#div ul li a:hover{
	color:#cc0000;}
</style>
<script type="text/javascript">
  $(function(){
    $("#div ul li").hover(
      function(){$(this).children("ul").slideDown()},
      function(){$(this).children("ul").slideUp()}
    )
  })
</script>
<div id="div">
<ul>
  <li><a href="#">活动视频</a>
    <ul>
      <li><a href="#">签售会</a></li>
      <li><a href="#">演唱会</a></li>
      <li><a href="#">明星代言</a></li>
      <li><a href="#">影视制作</a></li>
    </ul>
  </li>
</ul>
</div>